<template>
  <main class="content">
    <div class="post-list" v-if="currentTab === 'home'">
      <PostItem 
        v-for="(post, index) in currentFeed" 
        :key="post.id" 
        :post="post" 
      />
    </div>

    <div class="qa-list" v-if="currentTab === 'qa'">
      <div 
        class="qa-item" 
        v-for="(item, idx) in currentQa" 
        :key="idx"
        @click="goQaDetail(item.id)"
      >
        <div class="qa-title">
          [{{ item.category }}] {{ item.title }}
          <span class="unanswered" v-if="item.answers === 0">未回答</span>
        </div>
        <div class="qa-meta">
          <span>提问者：{{ item.author }}</span>
          <span>浏览{{ item.views }}k · 回答{{ item.answers }}</span>
        </div>
      </div>
    </div>

    <div class="course-list" v-if="currentTab === 'course'">
      <div 
        class="course-card" 
        v-for="(item, idx) in courseList" 
        :key="idx"
        @click="goCourseDetail(item.id)"
      >
        <img :src="item.cover" alt="course cover" class="course-cover">
        <div class="course-info">
          <div class="course-title">{{ item.title }}</div>
          <div class="course-teacher">讲师：{{ item.teacher }}</div>
          <div class="course-stats">
            已学{{ item.learners }}人 · 评分{{ item.rating }}
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import PostItem from './PostItem.vue'

const router = useRouter()
const props = defineProps<{ 
  currentTab: 'home' | 'qa' | 'course' | 'activity' | 'live'
  homeTabs: string[]
  homeActiveTab: string
  feedList: Array<{ 
    id: number;
    title: string;
    author: string;
    views: number;
    comments: number;
    likes: number;
    tags: string[];
    desc: string;
  }>
  qaList: Array<{ 
    id: number;
    title: string;
    category: string;
    author: string;
    views: number;
    answers: number;
  }>
  courseList: Array<{ 
    id: number;
    title: string;
    teacher: string;
    learners: number;
    rating: number;
    cover: string;
  }>
  qaCategories: Array<{ id: number; name: string }>
  activeQaCategory: number
}>()

const currentFeed = computed(() => { 
  if (!Array.isArray(props.feedList)) { 
    return []; 
  } 
  return props.feedList.filter(item => 
    item.tags.some(tag => tag.includes(props.homeActiveTab)) 
  ) 
})

const currentQa = computed(() => {
  return props.qaList.filter(item => 
    item.category === props.qaCategories.find(cat => cat.id === props.activeQaCategory)?.name
  )
})

const goDetail = (id: number) => {
  router.push(`/post/${id}`)
}

const goQaDetail = (id: number) => {
  router.push(`/qa/${id}`)
}

const goCourseDetail = (id: number) => {
  router.push(`/course/${id}`)
}
</script>

<style scoped>
.post-list { 
  width: 100%; 
}
</style>